<template>
  <div class="sort-goods" ref="sortGoods">
    <div class="shop-item" ref="goodsItem">
      <div class="head-img">
        <img :src="headImg[listIndex]" width="100%" height="100%" alt="">
      </div>
      <h2 class="title">{{title[listIndex]}}</h2>
      <ul class="shop-list">
        <li class="item" v-for="(item, i) in goods" :key="i" @click="show(item)">
          <div class="shop-img">
            <img :src="item.icon" height="70" alt="">
          </div>
          <div class="name">{{item.label}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'

  export default {
    name: 'sortGoods',
    props: {
      goods: {
        type: Array,
      },
      headImg: {
        type: Array,
      },
      title: {
        type: Array,
      },
      listIndex: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        scroll: {},
      }
    },
    mounted() {
      this._initScroll()
    },
    methods: {
      // 分类商品滚动
      _initScroll() {
        if (this.scroll) {
          this.scroll = new BScroll(this.$refs.sortGoods, {
            click: true,
          })
        } else {
          this.scroll.refresh()
        }
      },
      // 发送数据给父元素
      show(good) {
        this.$emit('OutGood', good)
      },
    },
    watch: {
      'listIndex'() {
        this._initScroll()
      },
    },
    // created() {
    //     this.$nextTick(() => {
    //         this._initScroll()
    //     })
    // }
  }
</script>
